<template>
  <el-row class="mb-1">
    <!--新增按钮-->
    <el-button type="primary" icon="el-icon-plus"  @click="openRelationHDialog(null,parentClickRow)">{{$t('operation.add')}}
    </el-button>
    <!--删除按钮-->
    <el-button :disabled="multiple" type="danger" icon="el-icon-delete" @click="deleteRow(selectObjs)">{{$t('btn.delete')}}</el-button>
  </el-row>
  <el-table :data="state.dataList" v-loading="state.loading" border
            @selection-change="selectionChangeHandle" highlight-current-row
            :cell-style="tableStyle.cellStyle"  :header-cell-style="tableStyle.headerCellStyle"
            @row-click="rowClick"
            style="width: 100%;height: 100%">
    <el-table-column type="selection" />
    <el-table-column prop="relationItemName" disabled :label="$t('qms.AssociatedName')" />
    <el-table-column prop="relationItemCode" disabled :label="$t('qms.AssociationCode')" />
    <el-table-column fixed="right" :label="$t('operation.Operation')" >
      <template #default="scope">
        <el-button icon="edit" type="primary" v-auth="'platform_basDicSet_edit'"
                   @click="openRelationHDialog(scope.row,null)">
        </el-button>
        <el-button
            type="danger"
            icon="delete"
            @click.prevent="deleteRow([scope.row.id])"
        >
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
  <tiForm ref="tiFormRef" @refresh="getDataList(false)" />
  <fqcForm ref="fqcFormRef" @refresh="getDataList(false)" />
  <iqcForm ref="iqcFormRef" @refresh="getDataList(false)" />
  <pqcForm ref="pqcFormRef" @refresh="getDataList(false)" />
</template>

<script setup lang="ts">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {delRelationH, qmsRelationHPage} from "/@/api/platform/qms/qmsRelationH";
import {useMessage, useMessageBox} from "/@/hooks/message";
import {useI18n} from 'vue-i18n';

const {t} = useI18n();


const tiForm = defineAsyncComponent(() => import('./tiForm.vue'));
const fqcForm = defineAsyncComponent(() => import('./fqcForm.vue'));
const iqcForm = defineAsyncComponent(() => import('./iqcForm.vue'));
const pqcForm = defineAsyncComponent(() => import('./pqcForm.vue'));


const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: qmsRelationHPage
})


const tiFormRef = ref()
const pqcFormRef = ref()
const iqcFormRef = ref()
const fqcFormRef = ref()


const openRelationHDialog = (childRow: any, parentRow: any) => {
  if (!parentClickRow.value){
    useMessage().error(t('qms.PleaseSelectTheInspectionItem'));
    return;
  }
  if(parentClickRow.value == 'TI'){
    tiFormRef.value.openRelationHDialog(childRow,parentRow);
  }else if(parentClickRow.value == 'FQC'){
    fqcFormRef.value.openRelationHDialog(childRow,parentRow);
  }else if(parentClickRow.value == 'PQC'){
    pqcFormRef.value.openRelationHDialog(childRow,parentRow);
  }else{
    iqcFormRef.value.openRelationHDialog(childRow,parentRow);
  }
}

//删除
const deleteRow = (ids: Array<number>) => {
  useMessageBox().confirm(t('operation.permanentDeletion')).then(() => {
    // 删除逻辑
    delRelationH(ids).then(() => {
      // 刷新表格逻辑
      getDataList(false)
    })
  });
}


const emit = defineEmits<{ (e: 'clickHRow', value: any): void }>();


const rowClick = (value: any) =>{
  emit('clickHRow', value);
}


const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  tableStyle
} = useTable(state)

// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

// 父级点击的行
const parentClickRow = {}

// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};

// 通过id进行子表的查询
const query = (row: Object) => {
  // 赋值查询参数
  state.queryForm.checkType= row.value
  // 保存选中的行数据
  Object.assign(parentClickRow, row)
  // 刷新子表数据
  getDataList()
}

// 暴露变量
defineExpose({
  query
});


</script>
